<template >
  <div class="content">
    <h3> 分析维度</h3>
     <div class="seachlist">
      <div class="listitem" >
        <div class="itemname" style="width:100px;">日期</div>
        <el-date-picker
          v-model="time"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="yyyy-MM"
      format="yyyy 年 MM 月"
          :unlink-panels="true"
        ></el-date-picker>
         <!-- <el-date-picker
      v-model="start"
      type="month"
      style="width:140px;"
      value-format="yyyy-MM"
      format="yyyy 年 MM 月"
      placeholder="开始日期">
    </el-date-picker>
    <span style="padding:0 10px;">-</span>
     <el-date-picker
      type="month"
      v-model="end"

      style="width:140px;"
     value-format="yyyy-MM"
      format="yyyy 年 MM 月"
      placeholder="结束日期">
    </el-date-picker> -->
      </div>
      <div class="listitem">
        <div class="itemname" style="width:100px;">媒介</div>
        <el-select v-model="medium" placeholder="请选择">
    <el-option
      v-for="item in MediaList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
      </div>
      <div class="listitem">
        <div class="itemname" style="width:100px;">媒体</div>
        <el-select v-model="media" placeholder="请选择">
    <el-option
      v-for="item in media_selectList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
      </div>
      <div class="listitem">
        <div class="itemname" style="width:100px;">节目</div>
        <el-select v-model="program" placeholder="请选择">
    <el-option
      v-for="item in program_selectList"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
      </div>
      <div class="listitem" @click="getprice_strategy" style="width:10%; margin-left:30px;">
        <el-button type="primary">数据分析</el-button>
      </div>
    </div>
   <div class="earch" id="myChart1"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import {price_strategy,program_select} from '../../api/decision.js'
import {mediaList} from '../../api/System.js'
import {getmedia_select} from '../../api/Salesman.js'
export default {
  data() {
    return {
      value3:'',
      time:[],
      MediaList:[],
      media_selectList:[],
      program_selectList:[],
      medium:'',
      media:'',
      start:'',
      program:'',
      end:'',
      seachParam:{},
      value: '',
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        //资源价格策略
         echarts1: {
        title: {
          text: "资源价格策略"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: [
        
        ]
      },
    }
  },
  created() {
    this.getprice_strategy()
    this.getmediaList()

  },
  mounted() {
    // this.drawLine1()
  },
  methods: {
    //获取节目
    getprogram_select(){
      var data={
        media_id:[this.media]
      }
program_select(data).then(res=>{
  console.log(res)
  if(res.code==200){
    this.program_selectList=res.data
  }
})
    },
   
    //getmedia_select
    //获取媒体列表
    media_select(){
     var data={
       medium_id:[this.medium]
     }
     getmedia_select(data).then(res=>{
       console.log(res)
       if(res.code==200){
         this.media_selectList=res.data
       }
     })
    },
    //获取媒介列表
    getmediaList(){
mediaList().then(res=>{
  if(res.code==200){
    console.log(res)
    this.MediaList=res.data.mediums
  }
})
    },
    getprice_strategy(){
      var data={
       start:this.time[0]?this.time[0]:new Date().getFullYear()+'-01',
       end:this.time[1]?this.time[1]:new Date().getFullYear()+'-12',
       medium:this.medium,
       media:this.media,
       program:this.program
      }
    price_strategy(data).then(res=>{
      console.log(res)
      if(res.code==200){
        this.echarts1.legend.data=[]
        this.echarts1.xAxis.data=[]
        this.echarts1.series=[]
        res.data.months.forEach(element => {
           this.echarts1.xAxis.data.push(element+'月')
        });
        res.data.data.forEach(element => {
          this.echarts1.legend.data.push(element.name)
          this.echarts1.series.push( {
            name: element.name,
            type: "line",
            data: element.money
          },)
        });
        this.drawLine1(this.echarts1)
      }
    })
    },
      drawLine1(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart.setOption(data);
    },
  },
watch: {
  medium:function(){
    this.media=''

  if(this.medium){
   this.media_select()
   
  }
  },
   media:function(){
      this.program=''
      this.program_selectList=[]
  if(this.media){
   this.getprogram_select()
  }
  },
  start:function(){
    console.log(this.start)
    var start=new Date(this.start)
    var end =new Date(this.end)
    if(start>end){
      this.end=''
    }
  },
   end:function(){
    console.log(this.end)
     var start=new Date(this.start)
    var end =new Date(this.end)
    if(start>end){
      this.end=''
    
     }
   }
},
}
</script>
<style lang="scss" scoped>
h3{
  width: 97%;
  margin: 0 auto;
  margin-top: 10px;
}
.seachlist {
  width: 97%;
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .listitem {
    // width: 30%;
    margin-left: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 60px;
    }
    .listitem1 {
      width: 90px;
    }
  }
}
.earch{
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  height: 350px;
}
</style>